<template>
  <div class="a-cardui full-width product-carousel-container">
    <div class="a-cardui-header">
      <h2 class="headline">{{ $t('商品分类') }}</h2>
    </div>
    <div class="product-carousel-card mt-4">
      <div class="product-carousel relative">
        <button
          class="carousel-btn left-2"
          @click="scroll(-1)"
          aria-label="Previous"
        >
          <i class="fas fa-chevron-left"></i>
        </button>

        <div class="carousel-container" ref="containerRef">
          <div class="carousel-track flex gap-4"
          >
            <div v-for="category in cartStore.fatherCategoryList" :key="category.id" class="category-item" @click="goCategory(category)">
              <div class="category-content">
                <img :src="category.image" :alt="category.name">
                <span class="category-name">{{ category.name }}</span>
              </div>
            </div>
          </div>
        </div>

        <button
          class="carousel-btn right-2"
          @click="scroll(1)"
          aria-label="Next"
        >
          <i class="fas fa-chevron-right"></i>
        </button>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, onMounted, onUnmounted } from 'vue'
import useCartStore from "@/store/modules/cart";
import { useRouter } from 'vue-router'

const router = useRouter()
const cartStore = useCartStore()


const containerRef = ref<HTMLElement | null>(null)

const scroll = (direction: number) => {
  if (!containerRef.value) return

  const itemWidth = 160 // 单个项目宽度
  const gap = 32 // gap-8 = 2rem = 32px
  const visibleWidth = containerRef.value.clientWidth
  const scrollAmount = Math.floor(visibleWidth / (itemWidth + gap)) * (itemWidth + gap) * direction

  // 计算最大可滚动距离
  const maxScroll = containerRef.value.scrollWidth - visibleWidth

  // 计算目标滚动位置
  const targetScroll = containerRef.value.scrollLeft + scrollAmount

  // 确保不会过度滚动
  if (direction > 0) {
    containerRef.value.scrollTo({
      left: Math.min(targetScroll, maxScroll),
      behavior: 'smooth'
    })
  } else {
    containerRef.value.scrollTo({
      left: Math.max(targetScroll, 0),
      behavior: 'smooth'
    })
  }
}

const goCategory = (v) => {
  close()
  router.push({
    path: '/products/category',
    query: {
      catId: v.catId,
      name: v.name
    }
  })
}

onMounted(() => {

})

onUnmounted(() => {
})
</script>


<style lang="scss" scoped>
$bg-white: #fff;
$text-primary: #333;
$font-size-sm: 14px;
$font-size-lg: 16px;
$border-radius-md: 8px;
$box-shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.1);
$box-shadow-md: 0 4px 8px rgba(0, 0, 0, 0.15);

@mixin respond-to($breakpoint) {
  @if $breakpoint == 'sm' {
    @media (max-width: 640px) { @content; }
  } @else if $breakpoint == 'md' {
    @media (max-width: 768px) { @content; }
  }
}

.product-carousel {
  width: 100%;
  overflow: hidden;
  position: relative;
  height: 220px;

  &:hover {
    .carousel-btn {
      opacity: 1;
    }
  }
}

.carousel-container {
  overflow-x: auto;
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.carousel-container::-webkit-scrollbar {
  display: none;
}

.carousel-track {
  display: inline-flex;
  gap: 2rem;
  padding: 0 1rem;
  align-items: center;
  white-space: nowrap;
}

.category-item {
  flex-shrink: 0;
  width: 160px;
  display: inline-block;
  padding: 0 10px;
}

.category-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.category-content img {
  width: 180px;
  height: 180px;
  border-radius: 50%;
  background-color: #E3F1E4;
  padding: 15px;
  object-fit: contain;
}

.category-name {
  font-size: 14px;
  color: #333;
  text-align: center;
  margin-top: 8px;
}

.carousel-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background-color: rgba(255, 255, 255, 0.8);
  width: 40px;
  height: 80px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  z-index: 10;
  transition: all 0.2s ease;
  border: none;
  cursor: pointer;
  opacity: 0;
}

.carousel-btn:hover {
  background-color: rgba(255, 255, 255, 1);
}

.left-2 {
  left: 0;
}

.right-2 {
  right: 0;
}

.a-cardui-header {
  margin-bottom: 16px;

  .headline {
    font-size: 21px;
    line-height: 27.3px;
    font-weight: 700;
    color: #0F1111;
  }
}

@include respond-to('md') {
  .product-carousel {
    height: 200px;
  }

  .category-item {
    width: 140px;

    img {
      width: 100px;
      height: 100px;
      padding: 15px;
    }
  }

  .carousel-track {
    gap: 1.5rem;
  }
}

@include respond-to('sm') {
  .product-carousel {
    height: 180px;
  }

  .category-item {
    width: 120px;

    img {
      width: 80px;
      height: 80px;
      padding: 10px;
    }
  }

  .carousel-btn {
    width: 30px;
    height: 60px;
  }

  .left-2 {
    left: 0;
  }

  .right-2 {
    right: 0;
  }

  .carousel-track {
    gap: 1rem;
  }
}
</style>
